import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyInfoPage extends StatelessWidget {
  var primaryColor;

  @override
  Widget build(BuildContext context) {
    primaryColor = Theme.of(context).primaryColor;
    return Stack(
      children: [
        Container(
          padding: EdgeInsets.fromLTRB(0, 15, 5, 30),
          height: 170,
          alignment: Alignment.centerLeft,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              tileMode: TileMode.clamp,
              colors: [
                primaryColor,
                Colors.orangeAccent[400],
                Colors.orangeAccent,
                Colors.red
              ],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
          ),
          child: header(),
        ),
        Positioned(
          child: Container(
            // decoration: BoxDecoration(
            //     borderRadius: BorderRadius.circular(10),
            //     border: Border.all(color: Colors.grey, width: 1),
            //     color: Colors.white70.withOpacity(1)),
            child: body(),
            height: 500,
          ),
          top: 140,
          left: 8,
          right: 8,
        )
      ],
    );
  }

  Widget body() {
    return Column(
      children: [
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.max,
            children: [
              orderType('全部订单', Icons.border_all),
              orderType('待发货', Icons.backpack_rounded),
              orderType('待签收', Icons.delivery_dining),
              orderType('已完成', Icons.compare),
              orderType('退换货', Icons.swap_horizontal_circle),
            ],
          ),
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.grey,
            ),
            borderRadius: BorderRadius.circular(10),
            color: Colors.white.withOpacity(1),
          ),
          padding: EdgeInsets.only(top: 15, bottom: 15),
        ),
        other('浏览记录', Icons.history_edu_rounded),
        other('我的收藏', Icons.star),
        other('收货地址', Icons.gps_fixed_rounded),
        other('我的礼物', Icons.card_giftcard),
        other('我的优惠券', Icons.money),
        // other('我的礼物',Icons.card_giftcard),
      ],
    );
  }

  Widget other(String title, IconData iconData) {
    return new GestureDetector(
      onTap: () {},
      child: Container(
        padding: EdgeInsets.only(top: 20, bottom: 20),
        margin: EdgeInsets.only(top: 5),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 1),
          borderRadius: BorderRadius.circular(10),
          color: Colors.white.withOpacity(1),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.max,
          children: [
            Icon(
              iconData,
              color: primaryColor,
            ),
            Text(title),
            SizedBox(
              width: 150,
            ),
            Icon(Icons.navigate_next_outlined)
          ],
        ),
      ),
    );
  }

  Widget orderType(String title, IconData iconData) {
    return new GestureDetector(
      onTap: () {},
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(
            iconData,
            size: 30,
            color: primaryColor,
          ),
          Text(
            title,
            style: TextStyle(fontSize: 16),
          ),
        ],
      ),
    );
  }

  Widget header() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          child: GestureDetector(
            child: CircleAvatar(
              radius: 40,
              backgroundImage: AssetImage(
                'images/header.jpg',
              ),
            ),
          ),
          width: 70,
          height: 70,
          margin: EdgeInsets.fromLTRB(0, 20, 5, 20),
        ),
        Text(
          '摩卡时代',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontSize: 20, color: Colors.black),
        ),
        SizedBox(
          width: 120,
        ),
        GestureDetector(
          onTap: () {},
          child: Icon(
            Icons.settings,
            color: Colors.white,
            size: 29,
          ),
        ),
      ],
    );
  }
}
